/**
 * useContext()
 *
 *    语法：
 *        const value = useContext(context)
 *        1. context 就是由 React.createContext() 的返回值
 *        2. value 就是 该 context 提供下来的值
 */

import { Button } from "antd";
import { useContext, useState, createContext } from "react";

const MyContext = createContext(1);

function Hello() {
  const count = useContext(MyContext);

  return <Button>{count}</Button>;
}

export default function App() {
  const value = useContext(MyContext);

  const [count, setCount] = useState(100);

  return (
    <div>
      <h1>useContext</h1>

      <p>{value}</p>

      <Button onClick={() => setCount(500)}>修改 count</Button>
      <hr />

      <Hello />

      <MyContext.Provider value={100}>
        <Hello />

        <MyContext.Provider value={count}>
          <Hello></Hello>
        </MyContext.Provider>
      </MyContext.Provider>
    </div>
  );
}
